import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/sankey/lit-sankey.ts"
import {SankeyProps} from "../../../echarts/sankey/lit-sankey.ts";

const meta: Meta<SankeyProps> = {
    title: 'Echarts/LitSankey',
    tags: ['autodocs'],
    render: (args: SankeyProps): TemplateResult => {
        return html`<lit-sankey 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .backgroundColor=${args.backgroundColor}
            .title=${args.title}
            .tooltip=${args.tooltip}
            .data=${args.data}
            .links=${args.links}
            .orient=${args.orient}
            .lineStyle=${args.lineStyle}
            .itemStyle=${args.itemStyle}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        backgroundColor: { control: 'text' },
        title: { control: 'object' },
        tooltip: { control: 'object' },
        data: { control: 'object' },
        links: { control: 'object' },
        orient: { control: 'text' },
        lineStyle: { control: 'object' },
        itemStyle: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<SankeyProps>;

export const BasicSankey: Story = {
    args: {
        chartId: 'basic-sankey-chart',
        width: '1200px',
        height: '600px',
        data: [
            {name: 'a'},
            {name: 'b'},
            {name: 'a1'},
            {name: 'a2'},
            {name: 'b1'},
            {name: 'c'}
        ],
        links: [
            { source: 'a', target: 'a1', value: 5 },
            { source: 'a', target: 'a2', value: 3 },
            { source: 'b', target: 'b1', value: 8 },
            { source: 'a', target: 'b1', value: 3 },
            { source: 'b1', target: 'a1', value: 1 },
            { source: 'b1', target: 'c', value: 2 }
        ],
    }
};

export const VerticalSankey: Story = {
    args: {
        chartId: 'vertical-sankey-chart',
        width: '1200px',
        height: '600px',
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
        },
        data: [
            { name: 'a' },
            { name: 'b' },
            { name: 'a1' },
            { name: 'b1' },
            { name: 'c' },
            { name: 'e' }
        ],
        links: [
            { source: 'a', target: 'a1', value: 5 },
            { source: 'e', target: 'b', value: 3 },
            { source: 'a', target: 'b1', value: 3 },
            { source: 'b1', target: 'a1', value: 1 },
            { source: 'b1', target: 'c', value: 2 },
            { source: 'b', target: 'c', value: 1 }
        ],
        orient:'vertical',
        lineStyle: {
            color: 'source',
            curveness: 0.5
        }
    }
};

export const ItemStyleSankey: Story = {
    args: {
        chartId: 'item-style-sankey-chart',
        width: '1200px',
        height: '600px',
        backgroundColor: '#fff',
        title: {
            subtext: 'Data From lisachristina1234 on GitHub',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
        },
        data: [
            { name: 'Werne', itemStyle: { color: '#f18bbf', borderColor: '#f18bbf' } },
            { name: 'Duesseldorf', itemStyle: { color: '#0078D7', borderColor: '#0078D7' } },
            { name: 'Cambridge', itemStyle: { color: '#3891A7', borderColor: '#3891A7' } },
            { name: 'Colma', itemStyle: { color: '#0037DA', borderColor: '#0037DA' } },
            { name: 'W. York', itemStyle: { color: '#C0BEAF', borderColor: '#C0BEAF' } },
            { name: 'Frankfurt am Main', itemStyle: { color: '#EA005E', borderColor: '#EA005E' } },
            { name: 'Metz', itemStyle: { color: '#D13438', borderColor: '#D13438' } },
            { name: 'Orleans', itemStyle: { color: '#567C73', borderColor: '#567C73' } },
            { name: 'Saint-Denis', itemStyle: { color: '#9ed566', borderColor: '#9ed566' } },
            { name: 'Hof', itemStyle: { color: '#2BCC7F', borderColor: '#2BCC7F' } },
            { name: 'Cliffside', itemStyle: { color: '#809B48', borderColor: '#809B48' } },
            { name: 'Leeds', itemStyle: { color: '#9B2D1F', borderColor: '#9B2D1F' } },
            { name: 'Victoria', itemStyle: { color: '#604878', borderColor: '#604878' } },
            { name: 'Erlangen', itemStyle: { color: '#A5644E', borderColor: '#A5644E' } },
            { name: 'Saint Germain en Laye', itemStyle: { color: '#2D3F3A', borderColor: '#2D3F3A' } },
            { name: 'Roissy en Brie', itemStyle: { color: '#761721', borderColor: '#761721' } },
            { name: 'Wokingham', itemStyle: { color: '#B1BADD', borderColor: '#B1BADD' } },
            { name: 'Runcorn', itemStyle: { color: '#B0CCB0', borderColor: '#B0CCB0' } },
            { name: 'Newton', itemStyle: { color: '#8164A3', borderColor: '#8164A3' } },
            { name: 'Morangis', itemStyle: { color: '#8E562E', borderColor: '#8E562E' } },
            { name: 'Metchosin', itemStyle: { color: '#C1504D', borderColor: '#C1504D' } },
            { name: 'Kirkby', itemStyle: { color: '#CCAF0A', borderColor: '#CCAF0A' } },
            { name: 'London', itemStyle: { color: '#956251', borderColor: '#956251' } },
            { name: 'Offenbach', itemStyle: { color: '#C17529', borderColor: '#C17529' } },
            { name: 'Warrington', itemStyle: { color: '#CEC597', borderColor: '#CEC597' } },
            { name: 'Vancouver', itemStyle: { color: '#9F2936', borderColor: '#9F2936' } },
            { name: 'SuperiorCard', itemStyle: { color: 'rgba(128,155,72,255)', borderColor: 'rgba(128,155,72,255)' } },
            { name: 'Lille', itemStyle: { color: '#ac7430', borderColor: '#ac7430' } },
            { name: 'Hamburg', itemStyle: { color: '#00BCF2', borderColor: '#00BCF2' } },
            { name: 'Langley', itemStyle: { color: '#CD7B38', borderColor: '#CD7B38' } },
            { name: 'Les Ulis', itemStyle: { color: '#424242', borderColor: '#424242' } },
            { name: 'Saarbrücken', itemStyle: { color: '#f63185', borderColor: '#f63185' } },
            { name: 'N. Vancouver', itemStyle: { color: '#9CBC59', borderColor: '#9CBC59' } },
            { name: 'Chalk Riber', itemStyle: { color: '#4F4BD9', borderColor: '#4F4BD9' } },
            { name: 'Esher-Molesey', itemStyle: { color: '#3EC562', borderColor: '#3EC562' } },
            { name: 'Chatou', itemStyle: { color: '#F06F2E', borderColor: '#F06F2E' } },
            { name: 'Hannover', itemStyle: { color: '#C3986D', borderColor: '#C3986D' } },
            { name: 'Roncq', itemStyle: { color: '#4D291C', borderColor: '#4D291C' } },
            { name: 'Ingolstadt', itemStyle: { color: '#009c7a', borderColor: '#009c7a' } },
            { name: 'Drancy', itemStyle: { color: '#986F0B', borderColor: '#986F0B' } },
            { name: 'Langford', itemStyle: { color: '#3C8EA4', borderColor: '#3C8EA4' } },
            { name: 'Lebanon', itemStyle: { color: '#4F82BE', borderColor: '#4F82BE' } },
            { name: 'Maidenhead', itemStyle: { color: '#D38017', borderColor: '#D38017' } },
            { name: 'Stoke-on-Trent', itemStyle: { color: '#A8CDD7', borderColor: '#A8CDD7' } },
            { name: 'Peterborough', itemStyle: { color: '#7A072D', borderColor: '#7A072D' } },
            { name: 'Suresnes', itemStyle: { color: '#859599', borderColor: '#859599' } },
            { name: 'Versailles', itemStyle: { color: '#84AA33', borderColor: '#84AA33' } },
            { name: 'Neunkirchen', itemStyle: { color: '#ff8b67', borderColor: '#ff8b67' } },
            { name: 'Vista', itemStyle: { color: 'rgba(106,82,134,255)', borderColor: 'rgba(106,82,134,255)' } },
            { name: 'Westminster', itemStyle: { color: '#1B587C', borderColor: '#1B587C' } },
            { name: 'Kiel', itemStyle: { color: '#A19574', borderColor: '#A19574' } },
            { name: 'Newcastle upon Tyne', itemStyle: { color: '#918485', borderColor: '#918485' } },
            { name: 'Oxon', itemStyle: { color: '#FFA98C', borderColor: '#FFA98C' } },
            { name: 'West Sussex', itemStyle: { color: '#B0E3C0', borderColor: '#B0E3C0' } },
            { name: 'Oak Bay', itemStyle: { color: '#4BADC7', borderColor: '#4BADC7' } },
            { name: 'Milton Keynes', itemStyle: { color: '#BA144C', borderColor: '#BA144C' } },
            { name: 'Eilenburg', itemStyle: { color: '#F0A22E', borderColor: '#F0A22E' } },
            { name: 'ColonialVoice', itemStyle: { color: 'rgba(64,105,157,255)', borderColor: 'rgba(64,105,157,255)' } },
            { name: 'Liverpool', itemStyle: { color: '#A28E6A', borderColor: '#A28E6A' } },
            { name: 'Calgary', itemStyle: { color: '#9F413E', borderColor: '#9F413E' } },
            { name: 'CAD', itemStyle: { color: '#40699D', borderColor: '#40699D' } },
            { name: 'Paris La Defense', itemStyle: { color: '#989391', borderColor: '#989391' } },
            { name: "Villeneuve-d'Ascq", itemStyle: { color: '#886CE4', borderColor: '#886CE4' } },
            { name: 'Gloucestershire', itemStyle: { color: '#964305', borderColor: '#964305' } },
            { name: 'Gateshead', itemStyle: { color: '#485FB5', borderColor: '#485FB5' } },
            { name: 'Salzgitter', itemStyle: { color: '#87a0c7', borderColor: '#87a0c7' } },
            { name: 'Woolston', itemStyle: { color: '#FFE2C5', borderColor: '#FFE2C5' } },
            { name: 'Frankfurt', itemStyle: { color: '#40699D', borderColor: '#40699D' } },
            { name: 'Münster', itemStyle: { color: '#7e7eb2', borderColor: '#7e7eb2' } },
            { name: 'York', itemStyle: { color: '#587C7D', borderColor: '#587C7D' } },
            { name: 'High Wycombe', itemStyle: { color: '#F07F09', borderColor: '#F07F09' } },
            { name: 'Stuttgart', itemStyle: { color: '#E3008C', borderColor: '#E3008C' } },
            { name: 'Sooke', itemStyle: { color: '#4E8542', borderColor: '#4E8542' } },
            { name: 'Essen', itemStyle: { color: '#B58B80', borderColor: '#B58B80' } },
            { name: 'München', itemStyle: { color: '#4dc0a6', borderColor: '#4dc0a6' } },
            { name: 'Haney', itemStyle: { color: '#6A5286', borderColor: '#6A5286' } },
            { name: 'Port Hammond', itemStyle: { color: '#F89746', borderColor: '#F89746' } },
            { name: 'Saint Ouen', itemStyle: { color: '#744DA9', borderColor: '#744DA9' } },
            { name: 'Watford', itemStyle: { color: '#E8B7B7', borderColor: '#E8B7B7' } },
            { name: 'GBP', itemStyle: { color: '#C32D2E', borderColor: '#C32D2E' } },
            { name: 'Paderborn', itemStyle: { color: '#F0C42E', borderColor: '#F0C42E' } },
            { name: 'Dunkerque', itemStyle: { color: '#881798', borderColor: '#881798' } },
            { name: 'Colomiers', itemStyle: { color: '#efa835', borderColor: '#efa835' } },
            { name: 'Oxford', itemStyle: { color: '#D8B25C', borderColor: '#D8B25C' } },
            { name: 'Bury', itemStyle: { color: '#FEB80A', borderColor: '#FEB80A' } },
            { name: 'Royal Oak', itemStyle: { color: '#009DD9', borderColor: '#009DD9' } },
            { name: 'Shawnee', itemStyle: { color: '#F07F09', borderColor: '#F07F09' } },
            { name: 'Lancaster', itemStyle: { color: '#D34817', borderColor: '#D34817' } },
            { name: 'DEM', itemStyle: { color: '#4E342E', borderColor: '#4E342E' } },
            { name: 'Grevenbroich', itemStyle: { color: '#FFA836', borderColor: '#FFA836' } },
            { name: 'Distinguish', itemStyle: { color: 'rgba(159,65,62,255)', borderColor: 'rgba(159,65,62,255)' } },
            { name: 'Cheltenham', itemStyle: { color: '#FF6551', borderColor: '#FF6551' } },
            { name: 'Reading', itemStyle: { color: '#72A376', borderColor: '#72A376' } },
            { name: 'Pantin', itemStyle: { color: '#69797E', borderColor: '#69797E' } },
            { name: 'Kassel', itemStyle: { color: '#e65e20', borderColor: '#e65e20' } },
            { name: 'Orly', itemStyle: { color: '#6E6A68', borderColor: '#6E6A68' } },
            { name: 'FRF', itemStyle: { color: '#5ba33b', borderColor: '#5ba33b' } },
            { name: 'Cergy', itemStyle: { color: '#B4009E', borderColor: '#B4009E' } },
            { name: 'Paris', itemStyle: { color: '#666666', borderColor: '#666666' } }
        ],
        links: [
            { source: 'FRF', target: 'Colomiers', value: 357.84 },
            { source: 'SuperiorCard', target: 'FRF', value: 894.6 },
            { source: 'DEM', target: 'München', value: 178.92 },
            { source: 'GBP', target: 'Reading', value: 188.53 },
            { source: 'CAD', target: 'Shawnee', value: 2346.92 },
            { source: 'GBP', target: 'Kirkby', value: 753.4 },
            { source: 'FRF', target: 'Roncq', value: 178.92 },
            { source: 'GBP', target: 'Peterborough', value: 999.16 },
            { source: 'DEM', target: 'Frankfurt am Main', value: 536.76 },
            { source: 'GBP', target: 'Oxford', value: 1831.38 },
            { source: 'Vista', target: 'FRF', value: 1789.2 },
            { source: 'CAD', target: 'Langley', value: 1274.82 },
            { source: 'DEM', target: 'Offenbach', value: 357.84 },
            { source: 'FRF', target: "Villeneuve-d'Ascq", value: 178.92 },
            { source: 'FRF', target: 'Dunkerque', value: 357.84 },
            { source: 'DEM', target: 'Eilenburg', value: 178.92 },
            { source: 'FRF', target: 'Paris', value: 1073.52 },
            { source: 'GBP', target: 'Maidenhead', value: 549.84 },
            { source: 'CAD', target: 'Sooke', value: 1764.5 },
            { source: 'CAD', target: 'Vancouver', value: 1528.58 },
            { source: 'DEM', target: 'Hamburg', value: 357.84 },
            { source: 'GBP', target: 'London', value: 8619.31 },
            { source: 'CAD', target: 'Oak Bay', value: 1565.11 },
            { source: 'Distinguish', target: 'FRF', value: 2683.8 },
            { source: 'DEM', target: 'Neunkirchen', value: 178.92 },
            { source: 'FRF', target: 'Cergy', value: 178.92 },
            { source: 'DEM', target: 'Hof', value: 357.84 },
            { source: 'FRF', target: 'Paris La Defense', value: 178.92 },
            { source: 'CAD', target: 'Westminster', value: 1149.8 },
            { source: 'DEM', target: 'Ingolstadt', value: 536.76 },
            { source: 'GBP', target: 'Saint Ouen', value: 0.59 },
            { source: 'FRF', target: 'Lille', value: 357.84 },
            { source: 'GBP', target: 'Leeds', value: 1356.69 },
            { source: 'FRF', target: 'Morangis', value: 357.84 },
            { source: 'GBP', target: 'Orly', value: 0.59 },
            { source: 'SuperiorCard', target: 'DEM', value: 1431.36 },
            { source: 'Vista', target: 'CAD', value: 5369.93 },
            { source: 'GBP', target: 'Paris', value: 0.64 },
            { source: 'GBP', target: 'Liverpool', value: 857.2 },
            { source: 'GBP', target: 'Stoke-on-Trent', value: 1131.71 },
            { source: 'Distinguish', target: 'DEM', value: 2504.88 },
            { source: 'CAD', target: 'Langford', value: 2343.46 },
            { source: 'DEM', target: 'Kassel', value: 536.76 },
            { source: 'GBP', target: 'High Wycombe', value: 216.84 },
            { source: 'CAD', target: 'Port Hammond', value: 1711.14 },
            { source: 'DEM', target: 'Duesseldorf', value: 178.92 },
            { source: 'GBP', target: 'Gloucestershire', value: 422.29 },
            { source: 'Distinguish', target: 'GBP', value: 10384.95 },
            { source: 'FRF', target: 'Roissy en Brie', value: 178.92 },
            { source: 'GBP', target: 'West Sussex', value: 592.17 },
            { source: 'CAD', target: 'Cliffside', value: 2906.27 },
            { source: 'GBP', target: 'Newcastle upon Tyne', value: 1448.29 },
            { source: 'GBP', target: 'Runcorn', value: 1120.48 },
            { source: 'GBP', target: 'W. York', value: 612.12 },
            { source: 'DEM', target: 'Kiel', value: 178.92 },
            { source: 'GBP', target: 'Woolston', value: 833.32 },
            { source: 'Distinguish', target: 'CAD', value: 6950.06 },
            { source: 'DEM', target: 'Frankfurt', value: 715.68 },
            { source: 'CAD', target: 'Colma', value: 0.22 },
            { source: 'DEM', target: 'Essen', value: 178.92 },
            { source: 'FRF', target: 'Chatou', value: 178.92 },
            { source: 'GBP', target: 'Cheltenham', value: 573.05 },
            { source: 'SuperiorCard', target: 'GBP', value: 8228.4 },
            { source: 'CAD', target: 'Haney', value: 2310.45 },
            { source: 'FRF', target: 'Saint Ouen', value: 178.92 },
            { source: 'CAD', target: 'Chalk Riber', value: 0.92 },
            { source: 'DEM', target: 'Salzgitter', value: 178.92 },
            { source: 'ColonialVoice', target: 'FRF', value: 1610.28 },
            { source: 'DEM', target: 'Stuttgart', value: 357.84 },
            { source: 'FRF', target: 'Saint-Denis', value: 178.92 },
            { source: 'CAD', target: 'Royal Oak', value: 2128.46 },
            { source: 'FRF', target: 'Les Ulis', value: 715.68 },
            { source: 'FRF', target: 'Drancy', value: 178.92 },
            { source: 'GBP', target: 'Esher-Molesey', value: 911.47 },
            { source: 'SuperiorCard', target: 'CAD', value: 7388.1 },
            { source: 'GBP', target: 'Bury', value: 903.94 },
            { source: 'GBP', target: 'Watford', value: 1326.53 },
            { source: 'CAD', target: 'Victoria', value: 827.39 },
            { source: 'DEM', target: 'Saarbrücken', value: 178.92 },
            { source: 'GBP', target: 'Lancaster', value: 685.69 },
            { source: 'FRF', target: 'Pantin', value: 178.92 },
            { source: 'CAD', target: 'Newton', value: 1781.91 },
            { source: 'GBP', target: 'Oxon', value: 493.65 },
            { source: 'CAD', target: 'Calgary', value: 361.39 },
            { source: 'DEM', target: 'Münster', value: 715.68 },
            { source: 'DEM', target: 'Grevenbroich', value: 536.76 },
            { source: 'DEM', target: 'Paderborn', value: 357.84 },
            { source: 'GBP', target: 'York', value: 3173.0 },
            { source: 'CAD', target: 'Metchosin', value: 1750.79 },
            { source: 'FRF', target: 'Suresnes', value: 357.84 },
            { source: 'FRF', target: 'Versailles', value: 894.6 },
            { source: 'DEM', target: 'Erlangen', value: 536.76 },
            { source: 'CAD', target: 'Lebanon', value: 0.87 },
            { source: 'GBP', target: 'Wokingham', value: 812.66 },
            { source: 'GBP', target: 'Cambridge', value: 500.37 },
            { source: 'ColonialVoice', target: 'GBP', value: 8040.78 },
            { source: 'FRF', target: 'Saint Germain en Laye', value: 178.92 },
            { source: 'FRF', target: 'Metz', value: 178.92 },
            { source: 'FRF', target: 'Orleans', value: 357.84 },
            { source: 'GBP', target: 'Milton Keynes', value: 1648.22 },
            { source: 'GBP', target: 'Warrington', value: 2162.83 },
            { source: 'CAD', target: 'N. Vancouver', value: 1862.46 },
            { source: 'DEM', target: 'Hannover', value: 178.92 },
            { source: 'Vista', target: 'GBP', value: 9497.54 },
            { source: 'DEM', target: 'Werne', value: 178.92 },
            { source: 'ColonialVoice', target: 'DEM', value: 1789.2 },
            { source: 'ColonialVoice', target: 'CAD', value: 7907.37 },
            { source: 'GBP', target: 'Gateshead', value: 1425.71 },
            { source: 'Vista', target: 'DEM', value: 1968.12 }
        ],
        lineStyle: {
            color: 'source',
            curveness: 0.5
        },
        itemStyle: {
            color: '#1f77b4',
            borderColor: '#1f77b4'
        },
    }
}